<template>
  <div class="manifest">
    <p>货单</p>
    <div class="full" v-if="maniData.length>0">
      <div class="each" v-for="(item,index) in maniData" :key="item.id">
        <p class="gys">供应商名字<span @click="del(index)">×</span></p>
        <van-card  @click="gotoDetail(item.id)"
          :price="item.unitPrice"
          :desc="parseInt(Math.sqrt(Math.pow(item.location[0],2)+Math.pow(item.location[1],2))) + 'km  ' + item.production"
          :title="item.title"
          :thumb="item.imgUrl[0]"
        >
        </van-card>
      </div>
    </div>
    <div class="empty" v-else>
      <van-empty
        class="custom-image"
        description="还没有发现您的货单哦"
      />
    </div>  
  </div>
</template>

<script>
import {computed, onMounted, ref, reactive, nextTick, watch, onBeforeUnmount} from "vue";
// import {getManiFestApi} from "../utils/api.js";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  setup(){
    // window.location.reload();
    const store = useStore();
    const router = useRouter();
   
    //删除商品
    const del=(i)=>{
      maniData.value.splice(i,1);
      let productId = localStorage.getItem("productId").split(',')
      productId.splice(i,1);
      localStorage.setItem('productId',productId.toString());
    }

    //货单数据获取
    let maniData=ref([]);//获取到的不同的商品信息组成的数组
    let id=ref([]);//不同商品的id
    const getManiFest=async ()=> {
      if(localStorage.getItem('productId')){
        // console.log(localStorage.getItem('productId'));
        if(localStorage.getItem('productId').includes(',')){
          id.value=localStorage.getItem('productId').split(',');
          console.log(id);
        }else{
          id.value.push(localStorage.getItem('productId'));
          console.log(id);
        } 

        
        for (let item of id.value) {
          await store.dispatch("mani/getDetail",item);
        }
        
          maniData.value =[...store.state.mani.detailInfo];
          console.log(maniData.value);
      };   
    }

    onMounted(() => {
      console.log(maniData);
      nextTick(()=>{getManiFest()});
      console.log(maniData);
    })

    //数据销毁之前让仓库中的数据先置空，再在挂载时重新渲染请求
    onBeforeUnmount(() => {
      store.commit("mani/delInfo");
    })

    const gotoDetail = (id) => {
      router.push("/detail/"+id)
    }
    return { del,getManiFest,maniData,gotoDetail }
  }
};
</script>
<style lang="scss" scoped>
.manifest{
  background: url("../assets/img/椭圆 1@2x.png") no-repeat -40px -70px;
  background-size: 120%;
  height:607px;
  width:100%;
  position:relative;
  p{
    line-height:30px;
    padding:20px;
    text-align:left;
    font-size:18px;
    font-weight:700;
  }
  .empty{
    margin-top: 100px;
  }
   .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
    margin-top:150px;
  }
  .full{
    position:absolute;
    top:65px;
    left:20px;
    width:335px;
    border-radius:10px;
    background: #fff;
    overflow: hidden;
    .each{
      padding:10px;
    }
    .gys{
      height:20px;
      font-size:16px;
      font-weight: 100;
      color:rgb(26, 25, 25);
      padding:0;
      span{
        float:right;
        font-size:18px;
      }
    }
  }
}
</style>